import React, { Component } from 'react';
import { View, Text, TextInput, Button,Alert } from 'react-native';

import { storage, } from '../../utils/storage';

import  request from '../../utils/request';

class Suggection extends Component {

    constructor(props) {
        super(props)
        this.state = {
            userInfo: {},
            mobile: '',
            email: '',
            suggectionText: '',
            inputNum: 500
        }
    }
    render() {
        return (
            <View style={{ flex: 1, padding: 10 }}>
                <View style={{
                    height: 130, backgroundColor: 'white', marginBottom: 20,
                    borderWidth: 0.5, borderColor: '#e8e8e8'
                }}>

                    <TextInput
                        style={{ height: 110, backgroundColor: 'white', }}
                        multiline={true}
                        onChangeText={(text) => { this.suggectionText(text) }}
                        underlineColorAndroid='transparent'
                        placeholder='请输入反馈和建议'
                        maxLength={500}
                    />
                    <View style={{ position: 'absolute', right: 10, bottom: 5 }}>
                        <Text>{this.state.inputNum}</Text>
                    </View>

                </View>
                <Text style={{ marginBottom:10,fontSize: 18 }}>联系电话</Text>
                <TextInput
                    style={{ height: 44, backgroundColor: 'white', marginBottom: 20 }}
                    defaultValue={this.state.userInfo.mobile}
                    // multiline={true}
                    // value={this.state.userInfo.mobile}
                    onChangeText={(text) => { this.mobileChange(text) }}
                    underlineColorAndroid='transparent'
                    keyboardType='numeric'

                />
                <Text style={{ marginBottom:10, fontSize: 18 }}>邮箱</Text>
                <TextInput
                    style={{ height: 44, backgroundColor: 'white', marginBottom: 40 }}
                    defaultValue={this.state.userInfo.email}
                    // multiline={true}
                    // text={this.state.userInfo.email}
                    onChangeText={(text) => { this.eamilChange(text) }}
                    underlineColorAndroid='transparent'
                    placeholder='请留下您得邮箱'
                    keyboardType='email-address'
                />

                <View style={{ height: 44, backgroundColor: this.state.suggectionText ? 'blue' : 'gray', justifyContent: 'center',
               // 全体边框圆角
               borderRadius:5
               }}>
                    <Button style={{
                        height: 44, flex: 1,
                        backgroundColor: 'blue',
                    }}
                        onPress={this.submitBtnAction.bind(this)}
                        title='提交'
                        color='white'
                        disabled={this.state.suggectionText ? false : true}
                    />
                </View>

            </View>
        );
    }

    submitBtnAction() {

        const { email, suggectionText, mobile} = this.state;

        request({
            method: 'POST',
            url: 'feedbacks/saveFeedback',
            data: { email:email, feedback:suggectionText,mobile:mobile },
            access_token:this.state.userInfo.token,
            
          })
            .then((data) => {

                alert('提交成功')
                this.props.navigation.goBack();
            })
            .catch(err => {
              Alert.alert('登录失败', err.message || err);
            });
    }

    suggectionText = (text) => {

        this.setState({
            suggectionText: text,
            inputNum:500-text.length
        })
    }


    mobileChange = (text) => {

        this.setState({
            mobile: text,
        })
    }

    eamilChange = (text) => {

        this.setState({
            email: text,
        })
    }


    componentDidMount() {

        storage.load({ key: 'accessUserData' }).then(result => {
            this.setState({
                userInfo: result,
                mobile:result.mobile,
                email:result.email,
            })
        })

    }

}

export default Suggection;

